<template>
<div class="MallHome">
  <!-- <mt-header title="兑奖商城">
  <router-link to="/" slot="left">
    <mt-button icon="back"></mt-button>
  </router-link>
   <router-link to="/" slot="right">
    <mt-button>兑奖规则</mt-button>
  </router-link>
</mt-header> -->
       <header class="mui-bar mui-bar-nav mint-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">兑奖商城</h1>
        	<h1 class="mui-title" style="position: relative;
          left: 69%;">兑奖规则</h1>
		</header> 
<!--  我的金币 -->
<div class="MyGoldCoin ">
    我的金币&nbsp;&nbsp;250,230,000
</div>
<div class="MyGoldCoin DynamicVerification">
   兑奖动态
   <img src="../../img/AwardingMall/商品详情金币.png" alt="">
   <span class="fontSize">床上鞋两双</span>
   <span class="date fontSize">30分钟前</span>
</div>
<div class="title">
    <span style="color:#d51313">最新</span> <span>最热</span> <span>金币价格</span>
</div>
<div class="backgound">
   <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/AwardingMallHome/CommodityDetails">
              <img src="../../img/HomeContainer/每日签到.png" alt="">
              <div class="mui-media-body">首页首页首页首页首页首页首页首页首页首页</div>
              <div class="col">
                  <span style="color:red" class="Gold">750,000,000 </span><img src="../../img/AwardingMall/兑奖商城金币.png" alt=""> <span class="title1">去兑换</span></div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/GameCenter">
             <img src="../../img/HomeContainer/每日签到.png" alt="">
              <div class="mui-media-body">游戏中心</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/Okami">
              <img src="../../img/HomeContainer/每日签到.png" alt="">
              <div class="mui-media-body">大神</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/Record">
               <img src="../../img/HomeContainer/每日签到.png" alt="">
              <div class="mui-media-body">开奖记录</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/Okami">
              <img :src="imghomeOkami" alt="">
              <div class="mui-media-body">大神</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/Record">
               <img src="../../img/HomeContainer/每日签到.png" alt="">
              <div class="mui-media-body">开奖记录</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/Okami">
              <img :src="imghomeOkami" alt="">
              <div class="mui-media-body">大神</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/Record">
              <img src="../../img/HomeContainer/每日签到.png" alt="">
              <div class="mui-media-body">开奖记录</div></router-link></li>
     </ul> 
</div>
</div>
</template>
<script>
</script>
<style lang="scss" scoped>
.MallHome {
  header {
    background:#d51313;
   a{ color:#fff;}
   h1{color:#fff;}
  }
  padding-top: 40px;
  .MyGoldCoin {
    //公用
    height: 60px;
    line-height: 60px;
    padding: 0 10px;
    font-size: 20px;
    border-bottom: 1px solid #e0e0e0;
  }
  .DynamicVerification {
    img {
      margin-left: 10px;
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }
    .fontSize {
      font-size: 16px;
    }
    .date {
      float: right;
      color: #4f4f4f;
      font-size: 10px;
    }
  }
  .title {
    padding: 0 30px;
    height: 50px;
    line-height: 50px;
              display: flex;
    justify-content: space-between;
    span {
      text-align: center;
      display: inline-block;
      font-size: 17px;
      width: 32%;
    }
  }
  .backgound {
    height: 100%;
    width: 100%;

    .mui-table-view {
      .mui-table-view-cell {
        background: #fff;
        width: 49%;
        height: 220px;
        border: 0.05rem solid #efeff4;
        border-radius: 17px;
        padding: 11px 0px;
        .col {
          padding-top: 10px;
          .Gold{
              font-size:0.3rem;
          }
          img{
              vertical-align:middle;
              width: 0.22rem;
              }
              .title1{
                  font-size:0.3rem;;
                  display: inline-block;
                  border: 1px solid red; 
                  padding: 0.02rem;
                  border-radius: 5px;
              }
        }
      }
    }
  }
}
</style>    
